<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		.box01, .box02, .box03{
			width: 50px;
			height: 50px;
			background-color: gold;
		}
		.box02, .box03{
			border:50px solid #000;
		}
		.box03{
			padding: 50px;
		}


	</style>

</head>
<body>
<!-- 	
盒子的真实尺寸
盒子的宽度: width + 左右border的宽度 + 左右padding的值 
盒子的高度: height + padding上下 + border上下

 -->
	<div class="box01">1</div>
	<br />
	<div class="box02">2</div>
	<br />
	<div class="box03">3</div>	

</body>
</html>